import React, { Component } from 'react';
import { Icon } from 'antd-mobile';

import './Order.scss'

class Order extends Component {
  constructor() {
    super()
    this.state = {
      show: false
    }
  }
  showModel () {
    if (this.state.show) {
      return (
        <div>
          {/* 蒙版 */}
          <div className="order-model" onClick={() => {this.setState({show: false})}}>
          </div>
          {/* 模态框 */}
          <div className="order-model-container">
            <div className="title">
              <span>支付</span>
              <Icon type="cross" size='s' className="close" onClick={() => {this.setState({show: false})}}/>
            </div>
            <div className="money"><span className="red">2988.00</span> 元</div>
            <div className="card"><span>招商银行卡（8975）</span>
            <Icon type="right" size='s' className="right"/></div>
            <div className="flex y-center x-center">
              <div className="sure-btn inline-block" onClick={() => {this.setState({show: false})}}>确认支付</div>
            </div>
          </div>
        </div>
      )
    }
  }
	render() {
    let height = window.screen.availHeight
		return (
			<div className="order-page" style={{minHeight: height + 'px'}}>
        <div className="address-container">
          <div className="title flex space-between y-center">
            <span>确认收货信息</span>
          </div>

          <div className="address-board flex y-center">
            <img src={require('../../images/position.png')} alt="" className="address-icon"></img>

            <div className="address-detail">
              <div className="flex space-between name-phone">
                <span>收件人： 高程哈</span>
                <span className="phone">13800138000</span>
              </div>
              <div className="address-more">
              收货地址：北京市东城区景山街道北京中医医院西南角305号
              </div>
            </div>
          </div>
        </div>

        <div className="product-detail">
          <div className="title flex space-between">
            <span>商品信息</span>
            <span className="red">等待支付</span>
          </div>

          <div className="details flex y-center">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531071934317&di=278cf69c485887645927aafd71988efb&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201604%2F23%2F20160423093537_5XRQL.jpeg" alt=""></img>
            <div>
              <div className="detail-title">
                净水器家用直饮厨房净水机不锈钢台式过滤器
              </div>
              <div className="detail-money2 flex space-between">
                  <span><span className="red">￥12.00</span> 元</span>
                  <span><span className="small">×</span>1</span>
              </div>
            </div>

          </div>

          <div className="title">
            <span>订单编号：100100432</span>
          </div>

          <div className="title flex">
            <div className="inline-block">支付项目：</div>
            <div className="small">净水器家用直饮厨房净水机不锈钢台式过滤器</div>
          </div>
          <div className="border-bottom1"></div>

          <div className="title">
            <div className="inline-block">服务年限：1期</div>
          </div>
          <div className="border-bottom1"></div>

          <div className="title">
            <div className="inline-block">服务费金额：<span className="red">￥798.00</span></div>
          </div>
          <div className="border-bottom1"></div>
          
        </div>
        <div className="bottom-bar2 btn-long" onClick={() => {this.setState({show: true})}}>
            确认支付
        </div>
        {this.showModel.call(this)}
        
			</div>
		);
	}
}

export default Order;